<template>
  <div>

    <el-tabs  v-model="activeName"  type="border-card">

      <el-tab-pane label="分类管理" name="first">

        <el-tree
          :data="categoriesTree"
          :show-checkbox="false"
          :default-expand-all="false"
          :expand-on-click-node="false">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span class="custom-tree-node-ed">
              <el-button
                type="text"
                size="mini"
                @click="() => add(data.id)">
                添加
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => updat(data.id)">
                修改
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(data.id)">
                删除
              </el-button>
            </span>
          </div>
        </el-tree>

        <el-button type="primary" plain class="mt10" @click="add(0)">添加顶级分类</el-button>

      </el-tab-pane>  
    </el-tabs>

    

  </div>
</template>

<style>
.custom-tree-node {
  align-items: center;
  width: 100%;
}
.custom-tree-node-ed {
  float: right;
  margin-right: 1rem;
}
</style>



<script>
import axios from 'axios';

export default {

  data() {
    return {
      activeName: 'first',
      categories: [],
      categoriesTree: []
    }
  },

  async created() {
    let {data} = await axios({
      method: 'get',
      url: '/api/admin/category'
    });
    //this.categories = data;
    data.map( item =>{
      if(item.pid == '0')
        return item;
    } );
    this.categories = data;
    this.categoriesTree = this._tree(0);
  },

  methods: {

    async add(pid) {
      let {value} = await this.$prompt('请输入分类名称', '添加', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4e00-\u9fa5\u3001]+$/,
          inputErrorMessage: '请输入正确的分类名称'
      });

      let rs = await axios({
        method: 'post',
        url: '/api/admin/category/add',
        data:{
          pid,
          name: value
        }
      });

      if(rs.data.code){
        this.$message.error(rs.data.message);
      }else{
        this.categories.push(rs.data.data);
        this.categoriesTree = this._tree(0);
        this.$message({
          message: '添加分类成功',
          type: 'success'
        });
      }
    },

    async updat(id) {
      let {value} = await this.$prompt('请输入分类名称', '修改', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\u4e00-\u9fa5\u3001]+$/,
          inputErrorMessage: '请输入正确的分类名称'
      });

      let rs = await axios({
        method: 'post',
        url: '/api/admin/category/updat',
        data:{
          id,
          name: value
        }
      });

      if(rs.data.code){
        this.$message.error(rs.data.message);
      }else{
        this.categories.map( item => {
          if(item.id == rs.data.data.id){
            item.name = rs.data.data.name;
          }
        } )
        this.categoriesTree = this._tree(0);
        this.$message({
          message: '修改分类成功',
          type: 'success'
        });
      }
    },



    async remove(id) {
      let rs = await axios({
        method: 'post',
        url: '/api/admin/category/remove',
        data:{
          id
        }
      });

      if(rs.data.code){
        this.$message.error(rs.data.message);
      }else{
        this.categories.map( item => {
          if(item.id == id ){
            item.children.map( itmm => {
              this.remove(itmm.id);
            });
          }
        });

        let data = this.categories.filter( item => {
          return item.id != id
        } );
        this.categories = data;
        this.categoriesTree = this._tree(0);
        this.$message({
          message: '删除分类成功',
          type: 'success'
        });
      }
    },

    _tree(id) {
      let data = this.categories.filter( item => {
        return item.pid == id
      } );

      data.forEach( item => {
        return item.children = this._tree(item.id);
      } );

      return data;
    }

  }

}
</script>